<template>
  <div class="msg-item" :class="[typeCls]">
    <div class="avatar">{{ initial }}</div>
    <div class="content">
      {{ item.content }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface IProp {
  item: IMessage
  receiver: string
}
const props = defineProps<IProp>()

const typeCls = computed(() => {
  return props.item.receiverId == props.receiver ? 'sent' : 'reveived'
})

const initial = computed(() => {
  return props.item.initial
  //  return props.item.realName.slice(0, 1)
})
</script>

<style lang="less" scoped>
.msg-item {
  display: flex;
  margin-bottom: 20px;
  &.sent {
    flex-direction: row-reverse;

    .content {
      background: #e6eef7;
      border-radius: 22.5px 0px 22.5px 22.5px;
    }
  }
  .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #3a75c5;
    color: #fff;
    font-size: 17px;
    text-align: center;
    line-height: 36px;
    flex-shrink: 0;
  }

  .content {
    border-radius: 0px 22.5px 22.5px 22.5px;
    background: #ffffff;
    max-width: 242.5px;
    padding: 16px;
    margin: 0px 8px;
    font-weight: medium;
    word-break: break-all;
    font-size: 14px;
    color: #212121;
    line-height: 21px;
  }
}
</style>
